<template>
  <div class="bigbox">
    <div class="top">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="12" style="display: flex">
            <el-form-item label="时间间隔" style="margin-right: 20px">
              <el-radio-group
                style="min-width: 200px"
                size="small"
                v-model="form.dateType"
              >
                <el-radio-button label="1">日</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="3">年</el-radio-button>
                <el-radio-button label="4">自定义</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                size="small"
                v-show="form.dateType !== '4'"
                v-model="form.dateTime"
                :type="
                  form.dateType === '1'
                    ? 'date'
                    : form.dateType === '2'
                    ? 'month'
                    : 'year'
                "
                placeholder="选择日期"
                :format="
                  form.dateType === '1'
                    ? 'yyyy-MM-dd'
                    : form.dateType === '2'
                    ? 'yyyy-MM'
                    : 'yyyy'
                "
                :value-format="
                  form.dateType === '1'
                    ? 'yyyy-MM-dd'
                    : form.dateType === '2'
                    ? 'yyyy-MM'
                    : 'yyyy'
                "
              >
              </el-date-picker>
              <el-date-picker
                size="small"
                v-show="form.dateType === '4'"
                v-model="form.formTime"
                type="daterange"
                style="width: 100%"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="init" @chongzhi="reset"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <TopTile @command="command" @daochu="daochu" @shuaxin="getList"></TopTile>
      <div style="width: 100%; height: 50%">
        <nt-echart :loading="loading2" :options="lineOptions"></nt-echart>
      </div>
      <nt-table
        v-loading="loading1"
        height="45%"
        :issize="issize"
        :tableData="List"
        row-key="name"
        :tableConfig="listConfig"
        default-expand-all
        :tree-props="{ children: 'children' }"
      >
      </nt-table>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import TopTile from '@/components/TopTitle/index.vue'
import dayjs from 'dayjs'
import { exportexcel } from '@/utils/excel'
import {
  getLineApi,
  getListApi
} from '@/api/Intelligence-maintenance/Auxiliary-analysis/Overall-load'
export default {
  components: { ntEchart, ntTable, TopTile },
  name: 'OverallLoad',
  data() {
    return {
      form: {
        companyNo: '',
        dateTime: dayjs().format('YYYY-MM-DD'),
        dateType: '1',
        formTime: [
          dayjs().startOf('month').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
      },
      issize: 'middle',
      loading1: false,
      loading2: false,
      List: [],
      Line: [],
      selectList: [],
      listData: {}
    }
  },
  watch: {
    'form.dateType': {
      handler(newVal, oldVal) {
        if (newVal !== '4') {
          this.form.dateTime = dayjs().format(
            newVal === '1' ? 'YYYY-MM-DD' : newVal === '2' ? 'YYYY-MM' : 'YYYY'
          )
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    lineOptions() {
      const data1 = {
        name: '总负荷曲线',
        type: 'line',
        smooth: true,
        symbol: 'none',
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          label: { show: true, formatter: '{b}:{c}' },
          data: [{ type: 'average', name: '平均值' }]
        },
        data: this.Line[0].datalist.map((i) => [i.timeReading, i.valueReading])
      }
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          name: '总负荷曲线(kW)',
          nameTextStyle: {
            fontSize: 25,
            fontWeight: 'bold',
            color: 'black',
            lineHeight: 56
          },
          type: 'value'
        },
        series: [data1]
      }
    },
    listConfig() {
      if (!this.List[0]) return []
      const configList = this.List[0]?.datalist?.map((i) => {
        return {
          label: i.timeReading,
          prop: 'valueReading',
          width: '150px',
          align: 'right',
          formatter: (row, column) => {
            return Number(
              row.datalist.find((i) => i.timeReading == column.label)
                ?.valueReading
            ).toFixed(2)
          }
        }
      })
      configList.unshift({
        label: '用电单位',
        prop: 'name',
        width: '350px'
      })
      return configList
    }
  },
  async created() {
    this.init()
  },
  methods: {
    reset() {
      this.form.dateType = '1'
    },
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    init() {
      Promise.all([this.getList(), this.getLine()])
    },
    async getList() {
      this.loading1 = true
      const res =
        this.form.dateType !== '4'
          ? await getListApi({
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            })
          : await getListApi({
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            })
      this.$set(this.List, 0, res.data.entity)
      this.listData = this.List[0]
      this.loading1 = false
    },
    async getLine() {
      this.loading2 = true
      const res =
        this.form.dateType !== '4'
          ? await getLineApi({
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            })
          : await getLineApi({
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            })
      this.Line = res.data.list
      this.loading2 = false
    },
    daochu() {
      this.form.dateType !== '4'
        ? exportexcel(
            '/pio-microservice-biz/pio/load/analysis/population/exportExcel',
            {
              companyNo: this.form.companyNo,
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            },
            '总体负荷分析'
          )
        : exportexcel(
            '/pio-microservice-biz/pio/load/analysis/population/exportExcel',
            {
              companyNo: this.form.companyNo,
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            },
            '总体负荷分析'
          )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .top {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .main {
    flex: 1;
    background-color: #fff;
    padding: 20px;
  }
}
</style>
